<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>我的智障好友</title>
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover"/>
    <meta name="copyright" content="Copyright (c) 2006-2018 Mafengwo."/>
    <meta name="format-detection" content="telephone=no,address=no"/>
    <meta name="referrer" content="always"/>
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
    <link rel="stylesheet" href="/css/reset.css" />
    <link rel="stylesheet" href="/css/strategy.css" />
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>

    <link href="https://css.mafengwo.net/css/cv/mobile+css+head:mobile+css+ui^YVw^1526627473.css" rel="stylesheet" type="text/css"/>
    <link href="https://css.mafengwo.net/mobile/css/wo/wo.css?1526627473" rel="stylesheet" type="text/css"/>

    <style type="text/css">
        .level{
            color: #ff9d00;
        }
    </style>
    <script>
        $(function () {
            var obj = getParams()//如果有传id过来，就是查看粉丝的关注或者粉丝的粉丝
            var user = JSON.parse(sessionStorage.getItem("user"));
            if (obj.id!=null){//如果有传id过来，就是查看粉丝的关注或者粉丝的粉丝，如果没传就是当前用户的粉丝
                user=getParams();
            }
            //获取所有关注的用户
            $.get("/followAndFans",{followId:user.id,pageSize:0},function (data) {
                $("#pills-1").renderValues(data,{getHref1:getHref})
            })
            //关注列表
            $("#selectFollow").click(function () {
                $.get("/followAndFans",{followId:user.id,pageSize:0},function (data) {
                    $("#pills-1").renderValues(data,{getHref1:getHref})
                })
            });
            //粉丝列表
            $("#selectFans").click(function () {
                $.get("/followAndFans",{fansId:user.id,pageSize:0},function (data) {
                    $("#pills-2").renderValues(data,{getHref:getHref})
                })
            });
            if (obj){
                if (obj.state){
                    $("#pills-1-tab").attr('class','nav-link active show')
                    $("#pills-2").attr('class','tab-pane fade active show')
                    $.get("/followAndFans",{fansId:user.id,pageSize:0},function (data) {
                        $("#pills-2").renderValues(data,{getHref:getHref})
                    })
                }else {
                    $("#fShow").attr('class','nav-link active show')
                    $("#pills-1").attr('class','tab-pane fade active show')
                    $.get("/followAndFans",{followId:user.id,pageSize:0},function (data) {
                        $("#pills-1").renderValues(data,{getHref1:getHref})
                    })
                }
            }

        })
    </script>

</head>
<body>
<div id="pos38"></div>
<header class="MfwHead ">
    <div class="LBtn">
        <a class="btn back" href="javascript:window.history.go(-1);" id="_j_top_history_back"></a>
    </div>

    <div class="CBtn"><h1>我的智障好友列表</h1></div>
</header>
<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
    <li class="nav-item" id="selectFollow">
        <a class="nav-link " id="fShow" data-toggle="pill" href="#pills-1">
            <span style="font-weight: bold;">关注</span>
        </a>

    </li>

    <li class="nav-item" id="selectFans">
        <a data-id="1" class="nav-link" id="pills-1-tab" data-toggle="pill" href="#pills-2">粉丝</a>
    </li>
</ul>
<div class="tab-content" id="pills-tabContent">

    <div class="tab-pane fade" id="pills-1">
        <ul id="followShow" render-loop="list" style="background-color: #6f42c1">
            <div >
                <li>
                    <div style="float:left;">
                        <hr>
                        <a data-href="/mine/userProfiles.html?id=" render-key="list.id" render-fun="getHref1">
                            <img style="width: 15%;float:left" render-src="list.headImgUrl" href="/mine/userProfiles.html">
                        </a>
                        <div style="float:left;margin-top:10px;margin-left:5%">
                            <div style="float:left" class="name" ><span render-html="list.nickName"></span><span class="level">LV 22</span></div><br>
                            <div class="total"><i class="sex female"></i>国家关注 <span>0</span> / 城市 <span  render-html="list.place"></span> / 足迹 <span>0</span></div>
                        </div>
                    </div>
                </li>
            </div>
        </ul>
    </div>

    <div class="tab-pane fade" id="pills-2">
        <ul  render-loop="list">
            <li>
                <div style="float:left;">
                    <hr>
                    <a data-href="/mine/userProfiles.html?id=" render-key="list.id" render-fun="getHref">
                        <img style="width: 15%;float:left" render-src="list.headImgUrl" >
                    </a>
                    <div style="float:left;margin-top:10px;margin-left:5%">
                    <div style="float:left" class="name" ><span render-html="list.nickName"></span><span class="level">LV 22</span></div><br>
                    <div class="total"><i class="sex female"></i>国家 粉丝<span>0</span> / 城市 <span  render-html="list.place"></span> / 足迹 <span>0</span></div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
</html>
